<template>
  <div class="">
    pinia 的学习

    <hr>
    <h2>{{ counter.num }}</h2>
    <button @click="changeNum">点击更改num</button>


    <button @click="changeNum2">解构后点击更改num</button>
    <hr>

    <h3> getters的基本使用 :{{ counter.doubleNum }}</h3>

    <hr>

    <h2> 解构后的值在模板上使用：{{ num }}----{{ doubleNum }}</h2>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, toRefs, ref } from "vue"


import useCounterStore from './store/counter'

import { storeToRefs } from 'pinia'

export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //这里存放数据
  setup () {
    const data = reactive({})

    const counter = useCounterStore()
    console.log(counter);

    const changeNum = () => {
      // counter.$patch({ num: counter.num + 1 })  // 方式一
      // counter.increment()// 方式二
      // counter.increment(10)// 方式三 传递参数

      //  异步 
      counter.asyncIncrement(100)
    }


    //  getters  

    // console.log(counter.doubleNum)


    //解构方法
    const { increment, asyncIncrement } = counter;

    // 解构属性 
    const { num, doubleNum } = storeToRefs(counter)

    const changeNum2 = () => {
      // increment()  // 同步 
      asyncIncrement(10)
    }



    return {
      data,
      counter,
      changeNum,
      changeNum2,
      num, doubleNum
    }
  }
}
</script>

<style lang="css" scoped>
</style>
